<template>
  <el-radio-group v-model="changeValue" v-bind="{ ...item }" style="width: 100%">
    <template v-for="option in getOptions()">
      <div
        v-if="!isHideQuota(option)"
        :key="option.value"
        class="show-vote"
        :class="[
          item.config.inline ? 'inline-block' : 'block',
          isChecked(option.value) ? 'checked' : '',
          item.disabled ? 'disabled' : ''
        ]"
      >
        <el-radio
          :disabled="option.quotaSetting && getSurplusQuota(option) <= 0"
          :label="option.value"
          @click.native.prevent="handleClick(option)"
        >
          <span v-if="getSurplusQuota(option) <= 0 && item.config.quotaBlankWarning">{{
            item.config.quotaBlankWarning
          }}</span>
          <span v-else>{{ option.label }}</span>

          <span class="text-muted" v-if="showQuota(option)">(余{{ getSurplusQuota(option) }})</span>
        </el-radio>
        <div class="vote-wrap">
          <el-input
            v-if="option.value === 0 && isChecked(option.value)"
            v-model="otherInputValue"
            class="other-input"
          />
          <vote
            :value="option.value"
            :vote-list="voteList"
            :total-vote="totalVote"
            v-if="item.config.showVoteResult"
          ></vote>
        </div>
      </div>
    </template>
    <!--    <template v-else>
          <span v-for="(option) in getOptions()" :key="option.value">
            <el-radio-button
              :label="option.value"
              :style="{display: item.config.inline ? 'inline-block' : 'block'}"
            >
              {{ option.label }}
            </el-radio-button>
            <el-input v-if="option.value===0" v-model="otherInputValue" style="margin-left: 25px" class="other-input"
                      size="mini"
            />
          </span>
        </template>-->
  </el-radio-group>
</template>

<script>
import Vote from '../TVote/vote'
import mixin from '../mixin'
import VoteMixin from '../TVote/VoteMixin'
import OptionQuotaMixin from '../mixins/OptionQuotaMixin'

export default {
  name: 'TRadioGroup',
  mixins: [mixin, VoteMixin, OptionQuotaMixin],
  props: ['models'],
  components: {
    Vote
  },
  data() {
    return {
      oldValue: null,
      otherInputValue: ''
    }
  },
  watch: {
    otherInputValue: {
      deep: true,
      handler(val) {
        this.models[`${this.item.vModel}other`] = val
        this.$emit('other-input-change', this.changeValue, this.item)
      }
    }
  },
  mounted() {
    if (this.models) {
      this.otherInputValue = this.models[`${this.item.vModel}other`]
    }
  },
  methods: {
    isChecked(val) {
      return val === this.changeValue
    },
    handleClick(option) {
      if (this.item.disabled) {
        return
      }
      if (option.quotaSetting && this.getSurplusQuota(option) <= 0) {
        return
      }
      option.value === this.changeValue ? (this.changeValue = null) : (this.changeValue = option.value)
      this.handleVote(this.changeValue)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-radio {
  height: auto;
  padding: 5px 10px;
  line-height: 28px !important;
}

::v-deep .el-radio {
  display: flex;

  .el-radio__input {
    line-height: 32px !important;
  }

  .el-radio__label {
    line-height: 28px !important;
  }
}

.block {
  margin-bottom: 10px;

  .el-radio {
    width: 100%;
  }

  .other-input {
    margin-top: 10px;
  }
}

.inline-block {
  display: inline-block;
  margin-bottom: 10px;
  margin-right: 10px;
  vertical-align: top;

  .el-radio {
    width: 100%;
  }

  .other-input {
    margin-top: 10px;
  }
}

.inline-block.show-vote {
  min-width: 156px;
}

.show-vote {
  border-radius: 8px;
  border: 1px solid #dcdfe6;

  .vote-wrap {
    padding: 5px 10px;
  }

  .vote-wrap:empty {
    padding: 0;
  }

  .other-input {
    margin-top: 0;
  }
}

.checked {
  border-color: #1890ff;
}

.checked.disabled {
  border-color: #dcdfe6;
}

@media screen and (max-width: 414px) {
  .inline-block.show-vote:nth-child(even) {
    margin-right: 0;
  }
}

::v-deep .el-radio__label {
  width: 90% !important;
  text-overflow: ellipsis;
  white-space: normal;
  word-wrap: break-word;
  display: inline-block;
  vertical-align: middle;
}
</style>
